<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>商品详情</title>
		<link rel="stylesheet" type="text/css" href="css/common.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/GoodsDetails.css" />
		<link rel="stylesheet" type="text/css" href="css/swiper-3.4.2.css"/>
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/utils.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div class="GoodsDetails">
			<!--头部-->
			<header class="Pending_Header">
				<ul>
					<li class="backArr">
						<img src="img/Information_consultation/left.png"/>
					</li>
					<li class="logo">
						<img src="img/Pending_payment/or_logo.png" />
					</li>
					<li class="menuIcon">
						<!--<div class="count">13</div>-->
						<img src="img/Pending_payment/menu_icon.png" alt="" />
					</li>
				</ul>
			</header>
			<!--主要内容-->
			<div class="content">
				<!--商品详情《标题》-->
				<section>
					<div class="title">
						<span></span>
						<h4>商品详情</h4>
					</div>
				</section>
				<!--轮播图-->
				<div class="lunbo">
					<ul class="swiper-wrapper">
						<li class="swiper-slide">
							<img src="img/index/images/lunbo_03.jpg"/>
						</li>
						<li class="swiper-slide">
							<img src="img/index/images/proShow2_03.jpg"/>
						</li>
						<li class="swiper-slide">
							<img src="img/index/images/lunbo_03.jpg"/>
						</li>
						<li class="swiper-slide">
							<img src="img/index/images/proShow2_03.jpg"/>
						</li>
					</ul>
					<div class="swiper-button-prev">&lt;</div>
				    <div class="swiper-button-next">&gt;</div>
				</div>
				<!--内容详情-->
				<section>
					<div class="DetailsOfTheContent">
						<!--im电视墙板-->
						<div class="TV_wall">
							<h4>im电视墙板</h4>
							<span>/ TV wall broad</span>
							<div class="askMeBtn">在线咨询</div>
						</div>
						<!--第二个按钮-->
						<div class="TV_wall showMask" style="margin-top: 0.5rem">
							<a class="askMeBtn" imark="to_pay_button">立即购买</a>
						</div>
						<!--数额-->
						<div class="TheAmountOf">
							<span>￥8888</span>
							<input type="hidden" name="" id="" value="1" />
							<ul class="proNum">
								<li class="seeMore_ down">-</li>
								<li class="show"></li>
								<li class="seeMore_ up">+</li>
							</ul>
						</div>
						<!--质量保证-->
						<div class="QualityAssurance clearfix">
							<div class="ReturnOfGoods">
								<div class="left"><img src="img/classification/classification_gou.png"/></div>
								<div class="cont">30天退货</div>
							</div>
							<div class="ReturnOfGoods">
								<div class="left"><img src="img/classification/classification_gou.png"/></div>
								<div class="cont"><p>质量保证</p></div>
							</div>
							<div class="ReturnOfGoods">
								<div class="left"><img src="img/classification/classification_gou.png"/></div>
								<div class="cont"><p>Or自营店</p></div>
							</div>
						</div>
						<!--规格介绍-->
						<div class="SpecificationIntroduce">
							<div class="Specification">
								规 格：<span>100*100</span> 
							</div>
							<div class="Specification">
								介 绍：
							</div>
						</div>
						<!--产品介绍-->
						<div class="ProductIntroduction">
							产品介绍】text【产品介绍】text【产品介绍】text【产品介绍text【产品介绍】te产品介绍】text【产品介绍】text【产品介绍】text【产品介绍text【产品介绍】te产品介绍】text【产品介绍】text【产品介绍】text【产品介绍text【产品介绍】te产品介绍】text【产品介绍】text【产品介绍】text【产品介绍text【产品介绍】te
						</div>
					</div>
				</section>
				<!--第二内容-->
				<!--主要内容2-->
				<section class="recommend">
				<ul>
					<li>图文详情</li>
					<li>规格参数</li>
					<li>真实生活</li>
					<hr color="#e39d88"/>
				</ul>
				<div class="list">
					<ul>
						<li class="hierarchy">
							<div>12312312</div>
							
							<p>安耐晒发的发窘都发到idf傲视打发打发啊都发大水；发到付iadf；阿迪斯覅都是发；爱的色放aids发的发多舒服啊都是富婆啊屌丝发士大夫爱的色放阿迪斯发奥迪是否阿达佛阿迪斯发手动阀爱的色放爱的色放爱的色放阿达算法的说法u士大夫哀悼发的是覅嗲多舒服啊第三方爱的色放阿道夫 </p>
							<div class="mod">
								<img src="img/classification/classification_03.jpg" alt="电视柜模块" />
							</div>
							<ul>
								<li class="pciHeight">
									<img src="img/recommended/recommended_06.jpg"/>
								</li>
								<li class="pciHeight">
									<img src="img/recommended/recommended_08.jpg"/>
								</li>
								<li class="pciHeight">
									<img src="img/recommended/recommended_10.jpg"/>
								</li>
							</ul>
							<div class="line"></div>
							<h3>常常搭配</h3>
							<ul>
								<li class="pciHeight_1">
									<img src="img/recommended/recommended_16.jpg"/>
								</li>
								<li class="pciHeight_1">
									<img src="img/recommended/recommended_17.jpg"/>
								</li>
								<li class="pciHeight_1">
									<img src="img/recommended/recommended_19.jpg"/>
								</li>
							</ul>
						</li>
						<li>
							测试页面二
						</li>
						<li>
							测试页面三
						</li>
					</ul>
				</div>
				
			</section>
			</div>
			<!--2017.11.06弹出层-->
			<section class="selectSpecific">
					<div class="selCon animated slideInUp">
						<div class="selTitle">
							<div class="proImg">
								<img src="img/index/images/commentList_03.jpg"/>
							</div>
							<div class="proInfo">
								<p class="price">￥<span>175</span></p>
								<p class="color">已选&nbsp;:<span>"咖色"</span><span>"均码"</span></p>
							</div>
						</div>
						<ul class="selItem">
							<li>
								<p>规&nbsp;格</p>
								<span>均码</span><span>均码</span><span>均码</span><span>均码</span><span>均码</span><span>均码</span><span>均码</span><span>均码</span><span>均码</span><span>均码</span><span>均码</span>
							</li>
							<li>
								<p>颜色分类</p>
								<span>灰色</span>
							</li>
							<li>
								<p>购买数量</p>
								<div class="proNum">
									<input type="hidden" name="" id="" value="1" />
									<span class="seeMore_">-</span>
									<span>1</span>
									<span class="seeMore_">+</span>
								</div>
							</li>
						</ul>
					</div>
				</section>
			<!--底部-->
			<footer class="indexFooter">
				<ul>
					<li class="li_one">
						<div class="img_one">
							<img style="display: none;" src="img/index/goodDetail_footer1.png"/>
							<img src="img/index/g.png" /></div>
					</li>
					<li class="li_two">
						<div class="img_two"><img src="img/index/goodDetail_footer2.png" /></div>
					</li>
					<li class="li_three">
						<div class="img_three"><img src="img/index/goodDetail_footer3.png" /></div>
					</li>
					<li class="li_four active_">
						<div class="img_four"><img src="img/index/goodDetail_footer4.png" /></div>
					</li>
				</ul>
			</footer>
		</div>

		<script src="js/swiper-3.4.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/goodsDetails.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/touchBtn.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var ul = document.querySelector(".recommend > ul");
			var li = ul.querySelectorAll("li");
			var hr = ul.querySelector("hr");
			var list = document.querySelector(".recommend .list");
			var listLi = list.querySelectorAll(".recommend .list > ul > li");
			var juli = li[0].offsetLeft;
			var width1 = li[0].offsetWidth;
			hr.style.left = juli+"px"; 
			hr.style.width = width1+"px";
			var lis = [];//转化为真正的数组
			for(var i=0;i<li.length;i++){
				lis.push(li[i]);
			}
			lis.forEach(function(curVal,index){
				li[index].onclick = function(){
					var asd = li[index].offsetLeft;
					var width = li[index].offsetWidth;
					hr.style.left = asd+"px"; 
					hr.style.width = width+"px";
					var e = index;
					listLi.forEach(function(val,index){
						val.classList.remove("hierarchy");
						listLi[e].classList.add("hierarchy");
					})
				}
			})
			
			//增减按钮
			$(".proNum .show").text($(".TheAmountOf").find("input[type=hidden]").val());
			
			$(".proNum .up").on("click",function(){
				var num = parseInt($(".TheAmountOf").find("input[type=hidden]").val());
				num++;
				$(".TheAmountOf").find("input[type=hidden]").val(num);
				$(".proNum .show").text(num);
				
			})
			$(".proNum .down").on("click",function(){
				var num = parseInt($(".TheAmountOf").find("input[type=hidden]").val());
				num--;
				num = num<=0?0:num;
				$(".TheAmountOf").find("input[type=hidden]").val(num);
				$(".proNum .show").text(num);
				
			})
			//点击收藏改变图标
			var selecedImg=1;
			$("footer .li_one").on("click",function(){
				selecedImg = selecedImg?0:1;
				$(this).find("img").eq(selecedImg).css("display",'none').siblings().css("display","inline-block");
			})
			//弹出框的js
			$(".selectSpecific .proNum span").eq(1).text($(".selectSpecific .proNum ").find("input[type=hidden]").val());
			
			$(".selectSpecific .proNum span").eq(2).on("click",function(e){
				e.stopPropagation();
				var num = parseInt($(".selectSpecific .proNum ").find("input[type=hidden]").val());
				num++;
				$(".selectSpecific .proNum ").find("input[type=hidden]").val(num)
				$(".selectSpecific .proNum span").eq(1).text(num);
				
			})
			$(".selectSpecific .proNum span").eq(0).on("click",function(e){
				e.stopPropagation();
				var num = parseInt($(".selectSpecific .proNum ").find("input[type=hidden]").val());
				num--;
				num = num<=0?0:num;
				$(".selectSpecific .proNum ").find("input[type=hidden]").val(num)
				$(".selectSpecific .proNum span").eq(1).text(num);
			})
			//点击显示弹出层
			$(".showMask").on("click",function(){
				$(".selectSpecific").show();
				
			})
			$(".selectSpecific").not(".selCon").on("click",function(){
				$(".selectSpecific").hide();
			})
			$(".selCon").on("click",function(e){
				e.stopPropagation();
			})
			
		</script>
	</body>

</html>